<template>
  <div class="test-hmr">
    <van-card
      title="热更新测试"
      desc="修改这个文件来测试热更新功能"
      :thumb="testImage"
    >
      <template #tags>
        <van-tag type="primary">HMR测试</van-tag>
        <van-tag type="success">连接正常</van-tag>
      </template>
      <template #footer>
        <van-button size="small" @click="updateTime">
          更新时间: {{ currentTime }}
        </van-button>
      </template>
    </van-card>
    
    <div class="test-info">
      <p>WebSocket连接状态: <span class="status">正常</span></p>
      <p>热更新功能: <span class="status">已启用</span></p>
      <p>修改此文件内容，页面会自动更新</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentTime = ref('')
const testImage = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'

const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString()
}

let timer = null

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.test-hmr {
  margin: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-light);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.test-info {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-color);
  border-radius: var(--border-radius-md);
  
  p {
    margin-bottom: var(--spacing-sm);
    font-size: 14px;
    color: var(--text-secondary);
    
    .status {
      color: var(--success-color);
      font-weight: 600;
    }
  }
}
</style>
